<!-- Mixin 混入-->
<template>
  <div class="noteClass">
    <h3>#基础</h3>
    <p>当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项</p>
    <p>mixin内定义的所有选项相当于默认值, 生命周期会合并为数组, 都将被调用mixin的生命周期先调用</p>
    <h3>#使用</h3>
    <p>定义一个mixin.js文件</p>
    <pre v-highlight>
      <code class="lang-javascript">
          {{code1}}
      </code>
    </pre>
    <p>在vue文件中应用</p>
    <pre v-highlight>
      <code class="lang-javascript">
          {{code2}}
      </code>
    </pre>
    <h3>#应用</h3>
    <p>可以在mixin中引入公共组件并在main.js中使用mixin达到全局注册组件(filters,method建议以$_开头来避免冲突)</p>
  </div>
</template>

<script>
import {mixinTest1} from '@/mixins/demo.js'
export default {
  mixins:[mixinTest1],
  data() {
    return {
      code1:`
        export default {
          data() {
            return {
            name: 'mixin'
            }
          },
          created() {
            console.log('mixin...', this.name);
          },
          mounted() {},
          methods: {}
        }
      `,
      code2: `
        import '@/mixin'; // 引入mixin文件
          export default {
          mixins: [mixin]
        }
      `,
      msg:'testVue'
    };
  },
  methods: {
    hello(){
      // console.log(this.msg+'import')
    }
  }
}
</script>
<style scoped>
</style>